<@html>
<link rel="stylesheet" href="${path}/js/dojo/dojox/grid/resources/${theme}Grid.css">
<style>
	.item {
		padding: 1 0 1 0;
		cursor: pointer;
		width: 100%;
		height: 20px;
		line-height: 20px;
		text-align: center;
		cursor: pointer;
	}

	.item-over {
		background: #F0F0F0
	}

	.item-selected {
		background: #0072E3
	}

	.leftbord {
		width: 150px;
		margin: 1 1 1 1;
		height: 98%;
		position: absolute;
		left: 1;
		top: 3px;
		border: solid 1px #d0d0d0
	}

	.bord-title {
		text-align: center;
		background: #97CBFF;
		height: 20px;
		line-height: 17px;
	}

	.right-bord {
		margin: 1 0 0 0;
		float: right;
		position: absolute;
		left: 155px;
		top: 3px;
		width: 700px
	}
</style>
<script type="text/javascript">
	dojo.require("dijit.dijit");
	dojo.require("dojox.grid.DataGrid");
	dojo.require("widget.grid.cells.dijit");
	dojo.require("dojox.grid.cells.dijit");
	dojo.require("dojo.data.ItemFileWriteStore");
</script>
<div class="leftbord">
	<div class="bord-title">
		<b>常量类型</b>
	</div>
	<div style="text-align: center; margin-top: 3px;">
		<#list constantList as item>
			<div class="item" value="${item.value}" text="${item.text!}">
				&nbsp;${item.text!}&nbsp;
			</div>
		</#list>
	</div>
</div>
<div class="right-bord">
<@toolbar btnEdit=false btnSave=true/>
	<div dojoType="dojox.grid.DataGrid" singleClickEdit="true" store="store" jsId="grid" structure="structure"
	     autoHeight="true" style="width: 100%;">
	</div>
</div>
</@html>
<script type="text/javascript">
	var store = new dojo.data.ItemFileWriteStore({
				url:"${path}/master/constant.selectByType.do"
			})
	var structure = [
		{
//			defaultCell:{
//				type:dojox.grid.cells._Widget
//				//styles: "text-align: right;"
//			},
			cells:[
				[
					{
						name:"常量代码"
						,field:"code"
						,width:"10%"
						,editable: true
						,headerClasses:"gridHeader"
					},
					{
						name:"常量名称"
						,field:"name"
						,width:"20%"
						,editable: true
						,headerClasses:"gridHeader"
					},
					{
						name:"常量类型"
						,field:"type"
						,width:"10%"
						,editable: true
						,headerClasses:"gridHeader"
					},
					{
						name:"类型名称"
						,field:"typeName"
						,width:"20%"
						,editable: true
						,headerClasses:"gridHeader"
					},
					{
						name:"是否系统变量"
						,field:"isSystem"
						,type: widget.grid.cells.CheckBox
						//,options: ["否", "是"]
						//,values:["0","1"]
						,formatter:booleanFormat
						,width:"10%"
						,editable: true
						,headerClasses:"gridHeader"
					},
					{
						name:"显示顺序"
						,field:"priority"
						,width:"10%"
						,editable: true
						,headerClasses:"gridHeader"
					},
					{
						name:"备注"
						,field:"remark"
						,width:"20%"
						,editable: true
						//,type:dojox.grid.cells.DateTextBox
						,headerClasses:"gridHeader"
					}
				]
			]
		}
	]

	var idx = 0;
	/*
		  * 增加一行数据
		  */
	function addRow() {
		var arr = dojo.query(".item-selected");
		var type = "",typeName = "";
		if (arr.length > 0) {
			type = dojo.attr(arr[0], 'value');
			typeName = dojo.attr(arr[0], 'text');
		}
		store.newItem({
					id: idx,
					code: '',
					name: '',
					type: type,
					typeName: typeName,
					isSystem: 0,
					priority: 0,
					remark: ''
				});
		idx++;
	}
	/**
	 * 保存最终结果
	 */
	function save() {
		grid.edit.apply();
		var param = storeToParam(store);
		dojo.xhrPost({
					url:"${path}/master/constant.save.do"
					,content:param
					,handleAs:"json"
					,load:function(json) {
					}
				})
		store.save();
	}

	/**
	 * 删除一行
	 */
	function deleteRow() {
		grid.removeSelectedRows();
	}

	dojo.ready(function() {
		/********************左边列表事件*****************/
		dojo.query(".item").onclick(function(evt) {
			dojo.query(".item-selected").forEach(function(item) {
				dojo.removeClass(item, "item-selected");
			})
			dojo.addClass(this, "item-selected");
			var value = dojo.attr(this, 'value');
			grid.setStore(store, {"type":value});
		})
		dojo.query(".item").onmouseout(function(evt) {
			dojo.removeClass(this, 'item-over');
		})
		dojo.query(".item").onmouseover(function(evt) {
			dojo.addClass(this, 'item-over');
		})
		dojo.connect(dijit.byId("btnAdd"), "onClick", addRow);
		dojo.connect(dijit.byId("btnSave"), "onClick", save);
		dojo.connect(dijit.byId("btnDelete"), "onClick", deleteRow);
	})
</script>